<template>
  <div class="performanceAppeal-box content-box">
    <nav-title title="绩效申诉" :routerLink="routerLink"/>
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.emplid}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.name}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.dept}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value" style="font-size: 14px;" >{{allInfo.jobDescr}}</span>
        </div>
      </div>
    </div>
    <div class="performanceAppeal-list regulations-box">
      <div class="title">绩效结果</div>
      <div class="performanceAppeal-list-row">
        <div class="label">考核模板</div>
        <div class="value">{{allInfo.tempName}}</div>
      </div>
      <div class="performanceAppeal-list-row">
        <div class="label">排名组</div>
        <div class="value">{{allInfo.groupName}}</div>
      </div>
      <div class="performanceAppeal-list-col-box">
        <div>
          <div class="label">绩效得分</div>
          <div class="value">{{allInfo.score}}</div>
        </div>
        <div>
          <div class="label">排名</div>
          <div class="value">{{allInfo.ranking}}</div>
        </div>
      </div>
      <div class="performanceAppeal-list-col-box">
        <div>
          <div class="label">绩效等级</div>
          <div class="value">{{allInfo.level}}</div>
        </div>
        <div>
          <div class="label">绩效系数</div>
          <div class="value">{{allInfo.rate}}</div>
        </div>
      </div>
    </div>
    <div class="regulations-box">
      <div class="title">绩效申诉</div>
      <div class="info-label">是否就申诉内容与直接上级进行沟通且未被接受？</div>
      <div class="information">
        <checklist :required="true" :disabled="!edit" :max="1" :options="option" :value="[allInfo.cCommunication]" @on-change="checklistChange($event)"/>
        <div class="info-cell clearfix performanceAppeal-time">
          <label class="label"><span class="red">*</span>沟通时间</label>
          <div class="value">
            <!-- <input type="text" placeholder="请填写..." v-model="allInfo.cComnuniteDt"> -->
            <group>
              <datetime placeholder="请选择" :readonly="!edit" v-model="allInfo.cComnuniteDt"  format="YYYY-MM-DD" />
            </group>
          </div>
        </div>
        <p style="color: #f00;">（注：若未沟通，建议先沟通后再申诉）</p>
      </div>
      <div class="info-label">申诉事项：</div>
      <group>
        <x-textarea :max="200" :readonly="!edit" placeholder="请在这里输入..." v-model="allInfo.cApplyItems"/>
      </group>
      <div class="info-label">申诉理由及期望：</div>
      <group>
        <x-textarea :max="200" :readonly="!edit" placeholder="请在这里输入..." v-model="allInfo.cApplyReason"/>
      </group>
      <div v-if="this.from != 'performanceResult'">
        <div class="info-label" >HR意见：</div>
        <group>
          <x-textarea :max="200" :readonly="approved == '0'?false:true"  placeholder="请在这里输入..." v-model="allInfo.cHrAdvice"/>
        </group>
      </div>
    </div>

    <div class="performanceResult-list-button" v-if="edit">
      <button @click="saveOrSubmit('save')">保 存</button>
      <button @click="saveOrSubmit('commit')">提 交</button>
    </div>

    <!-- 流程图 -->
    <div class="regulations-box" v-if="this.from != 'performanceResult'">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr" :loginOprid="loginOprid"></v-flow-charts>
    </div>

    <!-- 审批意见 -->
    <div class="regulations-box" v-if="this.from != 'performanceResult'">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="allInfo.cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="allInfo.cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px" v-if="this.from != 'performanceResult'"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <div class="fix-btn">
        <button v-if="allInfo.cApprovalSw == 'Y'" class="blue-btn" @click="doOperate('Approval')">同意</button>
        <button v-if="allInfo.cAddSw == 'Y'" class="white-btn" @click="doOperate('AddStep')">
          <span>+</span> 加签</button>
        <span v-if="allInfo.cPushbackAllSw == 'Y'" class="reject-main">
          <button class="yellow-btn" @click="popGroup">驳回</button>
          <transition name="slide-fade">
            <span v-if="showGroup" class="reject-group">
              <button class="yellow-btn" @click="doOperate('PushAllback')">重走</button>
              <button class="yellow-btn" @click="doOperate('Pushback')">不重走</button>
            </span>
          </transition>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { XTextarea, Group, Checklist, Datetime } from "vux";
import {
  getPerresultApelInfo,
  saveApelInfo,
  perresultGetWfApelInfo,
  perresultApproveApel
} from "../../api/api";
import qs from "qs";
import vFlowCharts from "../formalStaff/common/flowChart";

export default {
  name: "PerformanceAppeal",
  components: {
    XTextarea,
    Group,
    Checklist,
    Datetime,
    vFlowCharts
  },
  created() {
    this.docid = this.$route.query.docid;
    this.year = this.$route.query.year;
    this.version = this.$route.query.version;
    this.from = this.$route.query.from;
    // if (this.$route.query.edit == 'true' || this.$route.query.edit == true) {
    //   this.edit = true;
    // } else {
    //   this.edit = false;
    // }
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.approved = this.$route.query.approved;
    this.loginOprid = this.$route.query.token;
  },
  mounted() {
    this.getData();
  },
  data() {
    return {
      routerLink: "",
      approved: "",
      cTransactionNbr: "",
      cHrAdvice: "",
      loginOprid: "",
      edit: false,
      option: [{ key: "Y", value: "是" }, { key: "N", value: "否" }],
      allInfo: {
        // time: '2018年04月',
        // tpl: '控股集团总部员工PPI考核模板',
        // rankingGulp: '人力资源中心S级员工',
        // score: '95',
        // ranking: '1/2',
        // grade: 'P7',
        // coefficient: '0.7',
      },
      showGroup: false
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      let params = {
        docid: this.docid,
        year: this.year,
        version: this.version
      };
      let foo;
      if (this.from == 'performanceResult') {
        foo = getPerresultApelInfo;
      } else {
        foo = perresultGetWfApelInfo;
        params = {
          cTransactionNbr: this.cTransactionNbr
        };
      }
      foo(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allInfo = res.retData;
            if (res.retData.cWfStatus == 'S' || res.retData.cWfStatus == 'B') {
              this.edit = true;
            }
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    saveOrSubmit(type) {
      if (!this.allInfo.cCommunication) {
        return this.$vux.alert.show({
          title: "提示",
          content: "请选择是/否！"
        });
      }
      if (!this.allInfo.cComnuniteDt) {
        return this.$vux.alert.show({
          title: "提示",
          content: "请选择沟通时间！"
        });
      }
      if (!this.allInfo.cApplyItems) {
        return this.$vux.alert.show({
          title: "提示",
          content: "请填写申诉事项！"
        });
      }
      if (!this.allInfo.cApplyReason) {
        return this.$vux.alert.show({
          title: "提示",
          content: "请填写申诉理由及期望！"
        });
      }
      this.$vux.loading.show();
      let params = {
        cApplyItems: this.allInfo.cApplyItems,
        cApplyReason: this.allInfo.cApplyReason,
        cCommunication: this.allInfo.cCommunication,
        cComnuniteDt: this.allInfo.cComnuniteDt,
        docid: this.docid,
        year: this.year,
        version: this.version,
        type
      };
      if (this.allInfo.cTransactionNbr)
        params.cTransactionNbr = this.allInfo.cTransactionNbr;
      saveApelInfo(qs.stringify(params))
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            let title = "";
            if (type == "save") {
              title = "保存";
            } else {
              title = "提交";
            }
            this.$vux.alert.show({
              title: "成功",
              content: title + "成功！",
              onHide: () => {
                this.$router.go(-1);
              }
            });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    checklistChange(value) {
      this.allInfo.cCommunication = value[0];
    },
    doOperate(actionType) {
      if (actionType == "PushAllback" || actionType == "Pushback") {
        this.showGroup = !this.showGroup;
      }
      window.event.cancelBubble = true;

      //同意审批
      let params = {
        cTransactionNbr: this.cTransactionNbr,
        actionType: actionType,
        cComments: this.cComments,
        cHrAdvice: this.cHrAdvice
      };

      if (actionType == "AddStep") {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: "Visa",
          params:{
            performanceAppeal: params
          },
        });
      } else {
        this.$vux.confirm.show({
          title: "提示",
          content: "您确认要同意？",
          onConfirm: () => {
            perresultApproveApel(qs.stringify(params))
              .then(res => {
                if (res && res.retCode === "000000") {
                  this.$router.push("/todoList/todo");
                } else {
                  this.$vux.alert.show({
                    title: "提示",
                    content: res.retMsg
                  });
                }
              })
              .catch(res => {
                this.$vux.alert.show({
                  title: "警告",
                  content: "网络异常，请稍后重试"
                });
              });
          }
        });
      }
    },
    popGroup() {
      this.showGroup = !this.showGroup;
      window.event.cancelBubble = true;
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.performanceAppeal-box {
  .regulations-box {
    .vux-x-textarea {
      .weui-cell__bd {
        border: 1px solid #ccc;
      }
    }
  }
  input {
    border: 1px solid #ccc;
    line-height: 32px;
  }
  .value {
    padding-right: 10px;
  }
  .information {
    > p {
      line-height: 3;
    }
  }
  .performanceAppeal-list {
    // border-bottom: 1px solid #ccc;
    text-align: left;
    font-size: 16px;
    div {
      line-height: 2;
    }
    .performanceAppeal-list-row {
      width: 100%;
      // display: flex;
      line-height: 32px;
      box-sizing: border-box;
      > div:first-child {
        // flex: 1;
        width: 90px !important;
        text-align: right;
        display: inline-block;
      }
      > div:last-child {
        // flex: 2;
        width: calc(100% - 130px);
        display: inline-block;
        color: #999;
        padding-left: 20px;
        box-sizing: border-box;
      }
    }
    .performanceAppeal-list-col-box {
      width: 100%;
      display: flex;
      > div {
        flex: 1;
        > div:first-child {
          // flex: 2;
          width: 90px;
          display: inline-block;
          text-align: right;
        }
        > div:last-child {
          // flex: 1;
          display: inline-block;
          padding-left: 20px;
          color: #999;
        }
      }
    }
  }
  .performanceResult-list-button {
    width: 100%;
    padding: 10px;
    text-align: center;
    margin-bottom: 20px;
    > button {
      padding: 8px 20px;
      font-size: 16px;
      border-radius: 5px;
      color: #fff;
      font-weight: bold;
      margin: 0 20px;
    }
    > button:first-child {
      background-color: rgba(28, 170, 254, 1);
    }
    > button:last-child {
      background-color: rgba(255, 152, 0, 1);
    }
  }
  .weui-cells_checkbox {
    .weui-cell__bd {
      border: none;
    }
    display: flex;
    label{
      width: 50%;
      &::before{
        content: none;
      }
    }
  }
  .performanceAppeal-time {
    padding: 0 5px 0 0;
    .vux-datetime-value{
      &::after{
        content: none;
      }
    }
    .label {
      flex: 0.9;
    }
    .value {
      border: 1px solid #ccc;
      .weui-cells {
        width: 100%;
        .vux-datetime.weui-cell.weui-cell_access {
          width: calc(100% - 20px);
        }
      }
    }
    input {
      padding-left: 5px;
    }
  }
}
@import "../../styles/rejectmain.scss";
</style>
